<template>
	<div class="ml-30 pb-30">
		<div v-for="(item,index) in items" :key="index" class="flex mt-24">
			<img-box class="css-pic br-8" :img-url="item.V_ThumbnailUrl410"/>
			<div class="flex-1 ml-20 mr-30">
				<p class=" fs-32 pb-10">{{ item.V_Title }}</p>
				<div class="css-preferential" @click="openshowPreferential">
					<div class="css-left">
						<span class="css-unit">{{ item.unit }}</span>
						<span class="color-primary">{{ couponValue }}</span>
					</div>
					<svg-icon icon-class="downselect" class="fs-20 color-primary" />
				</div>
				<div class="flex-s-c mt-30">
					<p ><span class="css-pricefh">￥</span> 
						<span class="css-price">{{item.V_GradePrice ? item.V_GradePrice.toFixed(2) : ''}}</span>
					</p>	
					<p class="fs-24">x {{ item.Amount }}</p>
				</div>
			</div>
		</div>
		  <!-- 优惠券选择弹窗 -->
		<van-popup v-model="showPreferential" position="bottom" class="bottom-popup" closeable
       close-icon="close">
			<div class="css-poup">
				<p class="fs-28">修改促销</p>
				<van-radio-group v-model="radio" v-for="(item,index) in offerlist" :key="index" class="mb-30">
					<van-radio :name="index" checked-color="#eb1010" class="mt" @click="changeRadio(index)">{{ item.value }}</van-radio>
				</van-radio-group>
				<div class="pb-30 flex-center mlr-30">
          <van-button
            class="solid-btn flex-2 br-44 "
            native-type="submit"
            @click="choseCoupon"
          >确定</van-button>
        </div>
			</div>
    </van-popup>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'mealDetailList',
  components: {
		imgBox
  },
  props: {  
		items: {
      type: Array,
      required: true
    },

  },
  data() {
    return {
			showPreferential:false,
			offerlist:[
				{
					id:1,
					value:'新用户促销活动',
					unit:'促'
				},
				{
					id:2,
					value:'满300减100',
					unit:'减'
				},
			],
      radio: 0,
      couponValue: '选择优惠券',
    }
  },
  watch: {
		
  },
  created() {
		this.offerlist.push({
			    id:0,
					value:'不使用优惠',
					unit:''
		})
  },
  methods: {
		openshowPreferential(){
			this.showPreferential = true
		},
    changeRadio(index) {
      console.log(index)
      this.radio = index
      this.couponValue = this.offerlist[index].value
      
    },
		//确认
		choseCoupon(){
			this.showPreferential = false
		}
  }
}
</script>
<style lang="scss" scoped>
.css-pic{
	width: 144px;
	height: 144px;
}
.css-pricefh{
	color: $red;
	font-size: 20px;
}
.css-price{
	color: $red;
	font-size: 28px;
}
.css-preferential{
	height: 40px;
	width: 300px;
	background: #fff7e8 ;
	display: flex;
	justify-content: space-between;
	padding: 15px;
	overflow: hidden;
}
.css-left{
	margin-top: -10px;
}
.css-unit{
	background: $red;
	border-radius: 6px;
	font-size: 20px;
	color: white;
	padding: 5px;
	margin-right: 10px;
}
.css-hdtxt{
	color: #EC612A;
}
.css-poup{
	//height: 300px;
	background: white;
	border-radius: 20px;
	margin: 30px;
}

</style>
